<template>
	<z-paging ref="paging" v-model="list" @query="getList">
		<view class="d-p-l-30 d-p-r-30">
			<view class="d-m-t-20 item d-p-30" v-for="(item, index) in list" :key="index">
				<view class="d-flex">
					<u-image src="/static/shop.png" width="30rpx" height="30rpx"></u-image>
					<view class="d-font-28 d-m-l-20 d-flex-1">{{ item.venue_name }}</view>
					<view class="d-font-28 status">待支付</view>
				</view>
				<view>
					<view class="d-flex d-col-top d-m-t-20 p">
						<u-image :src="item.goods_image" width="130rpx" height="130rpx" radius="10rpx"></u-image>
						<view class="d-flex-1 d-p-l-20">
							<view class="d-font-28 d-bold">{{ item.goods_name }}</view>
							<view class="d-flex d-m-t-10">
								<view class="d-font-24 tags d-m-r-20">x1</view>
								<!-- <view class="d-font-24 tags">使用时间:2022-12-15 12:00:00</view> -->
							</view>

							<view class="d-red">
								<text class="d-font-24">￥</text>
								<text class="d-font-36 bold">{{ item.goods_price }}</text>
								<!-- <text class="d-font-30 bold">.00</text> -->
							</view>
						</view>
					</view>
					<view class="d-font-24 d-99 d-m-t-10 p">
						<view>订单编号: {{ item.order_item_id }}</view>
						<view v-if="item.order_type == 3">场地: {{ item.court_field }}</view>
						<!-- <view class="qd"><image src="/static/qd.png"></image></view> -->
					</view>

					<view class="d-m-t-20 d-flex d-row-right">
						<view class="d-m-r-20">
							<u-button
								type="info"
								shape="circle"
								:custom-style="{
									height: '60rpx',
									borderColor: '#999999',
									color: '#999999',
									fotnSize: '28rpx',
									width: '174rpx'
								}"
								@click="(actionId = item.order_item_id), (show.cancel = true)"
							>
								取消订单
							</u-button>
						</view>
						<view>
							<u-button
								type="primary"
								shape="circle"
								:custom-style="{
									height: '60rpx',
									borderColor: '#59A0FF',
									background: '#59A0FF',
									fotnSize: '28rpx',
									width: '174rpx'
								}"
								@click="toPay(item.id)"
							>
								去支付
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<d-mode :show="show.cancel" content="您确认要取消该订单吗?" @cancel="show.cancel = false" @confirm="cancelOrder"></d-mode>
	</z-paging>
</template>

<script>
import { getMyOrder, cancelOrder, toPay } from '@/common/api';
export default {
	data() {
		return {
			current: 0,
			list: [],
			actionId: '',
			show: {
				cancel: false
			}
		};
	},
	methods: {
		setCurrent(e) {
			this.current = e.index;
			this.$refs.paging.reload(false);
		},
		async getList(page, limit) {
			getMyOrder({
				page,
				limit,
				orderStatus: 2
			})
				.then(res => {
					this.$refs.paging.complete(res.data.data);
				})
				.catch(err => {
					this.$refs.paging.complete(false);
				});
		},
		cancelOrder() {
			this.show.cancel = false;
			cancelOrder({
				order_id: this.actionId
			})
				.then(res => {
					uni.$u.toast('订单已取消');
					this.$refs.paging.reload(false);
				})
				.catch(err => {
					uni.$u.toast('服务器繁忙,请稍后再试');
				});
		},
		toPay(id) {
			toPay({
				id
			}).then(res => {
				// 如果支付成功
				this.$refs.paging.reload(false);
				uni.$u.toast('支付成功');
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
	color: #333;
	.top {
		background-color: #fff;
	}
	.item {
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 16rpx;
		.tags {
			height: 36rpx;
			background: #f3f3f3;
			border-radius: 18rpx;
			display: inline-block;
			padding: 0 20rpx;
		}
		.bold {
			font-weight: bold;
		}
		.p {
			position: relative;
		}
		.qd {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			image {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
}

.d-bold {
	font-weight: bold;
}
.d-red {
	color: #ff4105;
}
.d-99 {
	color: #999999;
}
.status {
	color: #ff4105;
}
</style>
